<template>
	<div class="content">
		<bg-box>
			<pro-item :items="searchData" />
			<!-- <div class="no-data" v-if="!searchData.length">
				<img src="//img.yzcdn.cn/vant/empty-image-default.png" alt="">
				<p>数据空空如也,去搜索一下吧!</p>
			</div> -->
			<van-empty image="search" description="数据空空如也,去搜索一下吧!" v-if="!searchData.length" />
		</bg-box>
	</div>
</template>

<script>
	import bgBox from '@/components/Bgbox.vue'
	import proItem from '@/components/proitem.vue'
	import bus from '@/utils/eventBus.js'
	import { search } from '@/api/search.js'
	export default {
		data () {
			return {
				searchData: [] // 搜索商品数据数组
			}
		},
		components: {
			bgBox,
			proItem
		},
		created() {
			bus.$on('search', (data) => {
				this._search(data)
			})
			bus.$on('clear', () => {
				this.searchData = []
			})
		},
		methods: {
			// 搜索请求
			_search (data) {
				// 判断搜索内容是否为空
				if(data === '') return this.searchData = []
				
				this.$toast.loading({
					message: '搜索中...',
					forbidClick: true
				})
				search({
					name: data
				})
				.then(res => {
					console.log('商品搜索',res)
					if(res.data.code !== 'Q001') return this.$toast.fail('请求异常,请重新尝试！')
					this.searchData = res.data.result
					this.$toast.clear()
				})
				.catch(err => {
					this.$toast.fail('请求失败,请重新尝试！')
					this.$toast.clear()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.no-data{
		width: 100%;
		img{
			width: 160px;
			height: 160px;
			margin: auto;
		}
		p{
			text-align: center;
			margin-top: 16px;
			color: #969799;
			font-size: 14px;
			line-height: 20px;
		}
	}
</style>